<script setup lang="ts">
import type { userInfoType } from "_s/config/user/type";
import { QForm } from "quasar";
import Choice_date from "_c/choice_date/index.vue";
// import { encrypt } from "_s/common/crypto";
// const { notify } = useQuasar();
const diaload = defineModel<boolean>();
// const emits = defineEmits(["update"]);
const props = defineProps(["info"]);
const edit = ref(false);

const form = ref<Partial<userInfoType>>({
  gender: 0,
  status: 0
});

if (props.info && props.info.id) {
  edit.value = true;
  form.value = props.info;
}

const formRules = {
  name: [(val: string) => !!val || "姓名不能为空"],
  username: [(val: string) => !!val || "用户名不能为空", (val: string) => val.length >= 6 || "用户名长度不能小于6"],
  password: [(val: string) => !!val || "密码不能为空", (val: string) => val.length >= 6 || "密码长度不能小于6"],

  email: [
    (val: string) => {
      if (!val) return true;
      const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return reg.test(val) || "邮箱格式不正确";
    }
  ]
};

const formRef = useTemplateRef("formRef") as Ref<InstanceType<typeof QForm>>;
const submit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) return;

  // 提交表单
};

// const notifyFn = (code: ApiResponseData<null>["code"], msg: ApiResponseData<null>["msg"]) => {
//   if (code === 0) {
//     notify({
//       message: `${edit.value ? "编辑" : "新增"}成功`,
//       type: "success"
//     });
//     diaload.value = false;
//     emits("update");
//   } else {
//     notify({
//       message: msg,
//       type: "error"
//     });
//   }
// };

const cancel = () => {
  diaload.value = false;
};
</script>
<template>
  <q-card class="container q-pa-lg">
    <q-card-section>
      <div class="text-h6">{{ edit ? "编辑" : "新增" }}</div>
    </q-card-section>
    <q-form
      ref="formRef"
      @keyup.enter.prevent="submit"
      autocomplete="off"
    >
      <q-card-section>
        <div class="row justify-between">
          <q-input
            ref="name"
            v-model="form.name"
            outlined
            dense
            v-require
            class="input"
            label="姓名"
            lazy-rules
            :rules="formRules.name"
          />
          <div class="input">
            <q-radio
              v-model="form.gender"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              :val="0"
              label="男"
            />
            <q-radio
              v-model="form.gender"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              :val="1"
              color="red"
              label="女"
            />
          </div>
        </div>
        <div class="row justify-between">
          <q-input
            ref="username"
            v-model="form.username"
            outlined
            dense
            clearable
            v-require
            class="input"
            label="账号"
            lazy-rules
            :rules="formRules.username"
          />
          <q-input
            v-if="!edit"
            ref="password"
            v-model="form.password"
            type="password"
            outlined
            dense
            clearable
            v-require
            class="input"
            :label="$t('login.password')"
            lazy-rules
            :rules="formRules.password"
          />
        </div>

        <div class="row justify-between">
          <q-input
            ref="email"
            v-model="form.email"
            outlined
            clearable
            dense
            class="input"
            label="邮箱"
            lazy-rules
            :rules="formRules.email"
          />
          <q-input
            ref="phone"
            v-model="form.phone"
            outlined
            clearable
            dense
            class="input"
            label="手机号码"
            lazy-rules
          />
        </div>

        <div class="row justify-between">
          <!-- <q-input
            v-model.number="form.age"
            outlined
            dense
            class="input"
            label="年龄"
          /> -->

          <Choice_date
            outlined
            class="input"
            label="出生日期"
            dense
            v-model="form.birthday"
            clearable
          ></Choice_date>

          <q-toggle
            v-if="!edit"
            v-model="form.status"
            :true-value="1"
            :false-value="0"
            :label="form.status === 1 ? '启用' : '禁用'"
            class="input q-pl-md"
            unchecked-icon="clear"
            checked-icon="check"
            dense
          />
        </div>
        <div class="row justify-between q-mt-md">
          <q-input
            v-model="form.remark"
            type="textarea"
            outlined
            dense
            class="full-width"
            label="备注"
          />
        </div>
      </q-card-section>
      <div class="text-center q-mt-lg">
        <q-btn
          unelevated
          color="primary"
          class="btn"
          :label="$t('pub.submit')"
          @click.prevent="submit"
        />
        <q-btn
          unelevated
          class="q-ml-sm btn"
          outline
          :label="$t('pub.cancel')"
          @click="cancel"
        />
        <!-- v-close-popup -->
      </div>
    </q-form>
  </q-card>
</template>

<style scoped lang="scss">
.container {
  width: 1050px;
  min-height: 250px;
}

.input {
  width: 220px;
}
.btn {
  width: 100px;
}
</style>
